<template>
  <div>生命周期钩子函数</div>
  <!-- router.push('/') -->
  <RouterLink to="/">返回首页</RouterLink>
  <div>
    <input type="text" v-model="text" />
    <!-- vue获取页面元素的方法，给页面元素添加ref属性 -->
    <input ref="input1" type="text" value="11111" />
  </div>
  <div>
    <input type="text" v-model="num1" />
    +
    <input type="text" v-model="num2" />
    =
    {{ num1 + num2 }}<br />
    {{ num3 }}
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, onUpdated, computed } from 'vue'

//获取ref元素，就只需要创建一个变量名称和ref元素的值匹配即可
//需要注意的是，值要在onMounted钩子函数之后才会被初始化完成
const input1 = ref(null)

const text = ref('')

const num1 = ref(0)
const num2 = ref(0)

const num3 = computed(() => {
  return parseInt(num1.value) + parseInt(num2.value)
})

console.log('页面元素', input1.value)

//onMounted钩子函数时页面元素已经被加载完成才会调用
//如果需要获取页面元素信息，那就必须要在onMounted钩子函数执行
//否则就无法正确获取页面函数
//onUnmounted钩子函数是离开页面就会被调用
//反挂载多半是用于销毁大型的js对象

onMounted(() => {
  console.log('页面加载完毕', input1.value)
  input1.value.focus()
})

onUnmounted(() => {
  console.log('页面卸载完毕')
})
onUpdated(() => {
  console.log('页面更新完毕', text.value)
})
</script>

<style scoped></style>
